<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>举报</title>
</head>
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<body>
    <form>
        <input type="hidden" name="reBookid" th:value="${r.reBookid}">
        <input type="hidden" name="reBookname" th:value="${r.reBookname}">
        <input type="hidden" name="reBookauthor" th:value="${r.reBookauthor}">
        <table>
            <tr>
                <td colspan="2">
                    <h2 align="center">举报</h2>
                </td>
            </tr>
            <tr>
                <td><font color="red">*</font>举报类型</td>
                <td>
                    <select name="retype" id="retype" onblur="checkRetype()" style="width: 350px;height: 30px;border: #5e5e5e 1px solid;border-radius: 5px">
                        <option value="-1">请选择</option>
                        <option value="低俗色情">低俗色情</option>
                        <option value="政治敏感">政治敏感</option>
                        <option value="血腥暴力">血腥暴力</option>
                        <option value="抄袭侵权">抄袭侵权</option>
                        <option value="章节缺失、乱序、重复">章节缺失、乱序、重复</option>
                        <option value="错别字过多">错别字过多</option>
                        <option value="欺诈广告">欺诈广告</option>
                        <option value="其它问题">其它问题</option>
                    </select><br>
                    <div style="height: 17px">
                        <span id="typeMes"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td><font color="red">*</font>举报理由</td>
                <td>
                    <textarea name="reLiyou" id="result" onblur="checkResult()" placeholder="请使用文明用语，详细描述该图书的违规情节" style="border-radius: 5px;width: 350px;height: 150px;resize: vertical"></textarea>
                    <br>
                    <div style="height: 17px">
                        <span id="resultMes"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="提交" onclick="addReport()" style="color: whitesmoke;font-size: 18px;background-color: #f99e01; width: 100px;height: 40px;text-align: center;border: none;line-height: 20px;border-radius: 20px;">
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //表单检验:类型
    function checkRetype() {
        let type = $("#retype").val();
        if (type==-1){
            $("#typeMes").html("<font color='red' size='2px'>请选择举报类型</font>");
            return false;
        }else {
            $("#typeMes").html("");
            return true;
        }
    }
    //表单检验:内容
    function checkResult() {
        let result = $("#result").val();
        if (result!=null&&result!=""){
            $("#resultMes").html("");
            return true;
        }else {
            $("#resultMes").html("<font color='red' size='2px'>举报理由不能为空</font>");
            return false;
        }
    }

    //提交
    function addReport(){
        let f1 = checkRetype();
        let f2 = checkResult();
        if (f1&&f2){
            let type = $("#retype").val();
            let result = $("#result").val();
            let newResult = type + "：" + result;
            $("#result").val(newResult);
            $.ajax({
                url:"/book/addReport",
                type:"post",
                data:$("form").serialize(),
                success:function (){
                    window.close();
                },error:function (){
                    alert("举报失败，请重新再试！");
                }
            })
        }
    }
</script>
</html>